<!DOCTYPE html> 
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
  <title>图片裁剪</title>
  <link  href="../../plugins/cropper-3.0.0/cropper.css" rel="stylesheet" type="text/css"></link>
  <style type="text/css">
    .container {
      max-width: 960px;
      margin: 20px auto 40px auto;
    }

    img {
      max-width: 100%;
    }
	.preview{
	  width:160px;
	  height:160px;
	}
    .row,.preview {
      overflow: hidden;
    }

    .col {
      float: left;
    }

    .col-6 {
      width: 50%;
    }

    .col-3 {
      width: 25%;
    }

    .col-2 {
      width: 16.7%;
    }

    .col-1 {
      width: 8.3%;
    }
  </style>
  <script type="text/javascript" src="../../plugins/jquery/2.2.4/jquery.min.js"></script>
  <script src="../../plugins/cropper-3.0.0/cropper.js"   type="text/javascript"></script>
  <script type="text/javascript">
	$(function () {
      $('#image').cropper({
		  aspectRatio: 1/1,
		  viewMode:3,
		  crop: function (e) {
            var data = $(this).cropper('getData');
			var x = dealNo(data.x);
			var y = dealNo(data.y);
			var width = dealNo(data.width);
			var height = dealNo(data.height);
			var htm = "裁剪区域:x="+x+",y="+y+",width="+width+",height="+height;
			$("#idpresult").html(htm);
			
			//预览
			var $preview = $(".preview");
			var previewAspectRatio = e.width / e.height;
			var previewWidth = $preview.width();
			var previewHeight = previewWidth / previewAspectRatio;
			var imageScaledRatio = e.width / previewWidth;
			var imageData = $('#image').cropper('getImageData');
			$preview.css({"height":previewHeight+"px"}).find("img").css({
                width: imageData.naturalWidth / imageScaledRatio,
                height: imageData.naturalHeight / imageScaledRatio,
                marginLeft: -e.x / imageScaledRatio,
                marginTop: -e.y / imageScaledRatio
              });
			
			
		  },
		  ready:function(e){
			var $clone = $("<img></img>").attr("src",$(this).attr("src"));
			$clone.css({
			  display: 'block',
              width: '100%',
              minWidth: 0,
              minHeight: 0,
              maxWidth: 'none',
              maxHeight: 'none'});
			$(".preview").append($clone);
		  }
        });
    });
	
	function getResult(){
		console.log("getData()=",$('#image').cropper('getData'));
		console.log("getContainerData()=",$('#image').cropper('getContainerData'));
		console.log("getImageData()=",$('#image').cropper('getImageData'));
		console.log("getCanvasData()=",$('#image').cropper('getCanvasData'));
		console.log("getCropBoxData()=",$('#image').cropper('getCropBoxData'));
		console.log("getCroppedCanvas()=",$('#image').cropper('getCroppedCanvas'));
	}
	function dealNo(data){
		data=data.toFixed(2);//保留两位
		data = parseFloat(data);
		return data;
	}
  </script>
</head>
<body>
<div class="container">
	<div class="row">
		<p>裁图方法和素材来自 Cropper v3.0.0 <a href="https://github.com/fengyuanchen/cropper">https://github.com/fengyuanchen/cropper</a> 本页面只是个测试用例</p>
	</div>
	<div class="row">
		<div class="col col-6">
			<img id="image" src="picture.jpg" alt="Picture">
			<!--<img id="image" src="iphone-X.png" alt="Picture">-->
		</div>
	</div>
	<div class="row" style="margin-top:10px;">
		<div class="col col-6">
			<button onclick="getResult();">点击获取输出结果,见console</button>
		</div>
	</div>
	<div class="row">
		<div class="col col-6">
			<p id="idpresult"></p>
		</div>
	</div>
	<div class="row">
		<div class="preview"></div>
	</div>
</div>
</body>
</html>